<template>
  <!-- 商品详情页面 -->
  <div id="goodsDetail">
    <section class="shop-single-section">
      <div class="auto-container">
        <div class="shop-single">
          <div class="product-details">
            <div class="basic-details">
              <div
                class="row clearfix"
                v-for="item in info"
                :key="item.goods_id"
              >
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                  <img
                    :src="url + item.goods_image"
                    alt=""
                    class="image-box"
                    id="image-box"
                  />
                  <div class="column_video" v-if="videoBool">
                    <div class="image_video" @click="playVideo" v-if="video">
                      <span
                        ><img src="../../../public/img/play.png" alt=""
                      /></span>
                    </div>
                    <div class="play_video" v-else>
                      <video
                        id="myVideo"
                        :src="url + item.goods_video"
                        autoplay
                        muted
                        controls
                        controlslist="nodownload"
                        object-fit="contain"
                        width="100%"
                        height="100%"
                      ></video>
                      <i class="el-icon-close" @click="closeVideo"></i>
                    </div>
                  </div>
                </div>
                <div class="info-column col-lg-6 col-md-12 col-sm-12">
                  <div class="inner-column">
                    <h4 id="title">{{ item.title }}</h4>
                    <!-- 标题下面的描述 -->
                    <!-- <div class="text" >
                      {{$t("GoodsDetail.content")}}
                    </div> -->
                    <div class="price">
                      {{ $t("GoodsDetail.price") }} :
                      <span id="price"
                        >{{ item.min_price }} {{ $t("Shopping.RMB") }}</span
                      >
                    </div>
                    <div class="other-options clearfix">
                      <div class="item-quantity">
                        <label class="field-label"
                          >{{ $t("GoodsDetail.quantity") }} :</label
                        >
                        <div class="input-group bootstrap-touchspin">
                          <el-input-number
                            type="number"
                            v-model.number="state"
                            :min="1"
                            :max="kuchun"
                            size="medium"
                            :precision="0"
                            :disabled="addshop"
                          ></el-input-number>
                        </div>
                      </div>
                      <button
                        type="button"
                        class="theme-btn cart-btn"
                        @click="shoppingTrolley()"
                      >
                        {{ $t("GoodsDetail.addCart") }}
                      </button>
                      <button
                        type="button"
                        class="theme-btn cart-btn btn_download"
                        v-if="info[0].model_image !== ''"
                        @click="download(item.model_image)"
                      >
                        {{ $t("GoodsDetail.download") }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="product-info-tabs">
              <div
                class="dianpu_name"
                v-for="data in brand"
                :key="data.brand_id"
                :v-if="brandBool"
              >
                <p>
                  <span @click="shop(data.brand_id)">{{
                    data.brand_name
                  }}</span>
                </p>
                <div class="goin">
                  <span @click="shop(data.brand_id)"
                    ><i class="el-icon-s-shop"></i
                    >{{ $t("GoodsDetail.Shop") }}</span
                  >
                </div>
                <!-- 客服图片 -->
                <div class="service" @click="Cservice">
                  <i class="el-icon-user"></i><span>联系客服</span>
                </div>
              </div>
              <div class="prod-tabs tabs-box">
                <ul class="tab-btns tab-buttons clearfix tabs-ul">
                  <li
                    data-tab="#prod-details"
                    :class="['tab-btn', num == 1 ? 'active_btn' : '']"
                    @click="prodDetails"
                  >
                    {{ $t("GoodsDetail.descripton") }}
                  </li>
                  <li
                    data-tab="#prod-spec"
                    :class="['tab-btn', num == 2 ? 'active_btn' : '']"
                    @click="prodSpec"
                  >
                    {{ $t("GoodsDetail.specification") }}
                  </li>
                  <li
                    data-tab="#prod-spec"
                    :class="['tab-btn', num == 3 ? 'active_btn' : '']"
                    @click="evaluate"
                  >
                    {{ $t("GoodsDetail.evaluate") }}
                  </li>
                </ul>
                <div class="tabs-content">
                  <div
                    class="tab"
                    id="prod-details"
                    style="display: block"
                    v-show="num == 1"
                    v-for="item in info"
                    :key="item.goods_id"
                  >
                    <!-- 商品详情 -->
                    <div
                      class="content"
                      id="goods_info"
                      v-html="item.content"
                    ></div>
                  </div>
                  <div
                    class="tab"
                    id="prod-spec"
                    style="display: block"
                    v-show="num == 2"
                  >
                    <!-- 商品参数 -->
                    <div id="param">
                      <table v-if="ulBool">
                        <tr
                          v-for="item in param"
                          :key="item.goods_id"
                          class="table_tr"
                        >
                          <td>{{ item.title }}</td>
                          <td>{{ item.value }}</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                  <div
                    class="tab"
                    id="prod-spec"
                    style="display: block"
                    v-show="num == 3"
                  >
                    <!-- 商品评价 -->
                    <div v-if="commentArr.length > 0">
                      <!-- <h4 class="evaluateTitle">商品评价<span><i>100%</i> 好评度</span></h4> -->
                      <h4 class="evaluateTitle">
                        {{ $t("GoodsDetail.commodityEvaluation") }}
                      </h4>
                      <div class="navigationBar">
                        <ul>
                          <li
                            @click="liBar(0)"
                            :class="[liNum == 0 ? 'NavigationLi' : '']"
                          >
                            {{ $t("GoodsDetail.All") }}({{ allNum }})
                          </li>
                          <li
                            @click="liBar(2)"
                            :class="[liNum == 2 ? 'NavigationLi' : '']"
                          >
                            {{ $t("GoodsDetail.Praise") }}({{ praiseNum }})
                          </li>
                          <li
                            @click="liBar(3)"
                            :class="[liNum == 3 ? 'NavigationLi' : '']"
                          >
                            {{ $t("GoodsDetail.mediumReview") }}({{ usualNum }})
                          </li>
                          <li
                            @click="liBar(4)"
                            :class="[liNum == 4 ? 'NavigationLi' : '']"
                          >
                            {{ $t("GoodsDetail.negativeComment") }}({{
                              negativeNum
                            }})
                          </li>
                          <!-- <li @click="liBar(1)" :class="[liNum == 1 ? 'NavigationLi' : '']">{{$t("GoodsDetail.picture")}}晒图(120)</li> -->
                        </ul>
                      </div>
                      <!-- 商品评论，全部评论 -->
                      <div
                        class="evaluateText"
                        v-for="(data, index) in renderingArr"
                        :key="index"
                      >
                        <div class="ET_left">
                          <div class="headPortrait">
                            <img :src="data.headimgurl" alt="" />
                          </div>
                          <span class="user_name">{{ data.nickname }}</span>
                        </div>
                        <div class="ET_right">
                          <ul>
                            <li>
                              <el-rate
                                v-model="data.level"
                                disabled
                                disabled-void-color="#C0C4CC"
                              ></el-rate>
                            </li>
                            <li>{{ data.content }}</li>
                            <li>
                              <span
                                class="ET_img"
                                v-for="(subData, x) in data.images"
                                :key="x"
                                @click="imgclick(subData, index)"
                                ><img :src="url2 + subData" alt=""
                              /></span>
                            </li>
                            <!-- <li v-show="data.imgBool"><div class="enlargeImg"><img :src="url2 + data.enlargeUrl" alt=""></div></li> -->
                            <!-- 卖家首次回复 -->
                            <li
                              class="reply"
                              v-show="
                                data.reply_content !== '' ||
                                (data.reply_images !== '' &&
                                  data.reply_images.length > 0)
                              "
                            >
                              <i class="triangle"></i>
                              <h5>
                                {{ $t("GoodsDetail.reply") }}：{{
                                  data.reply_content
                                }}
                              </h5>
                              <div
                                class="replyImage"
                                v-for="(subData2, index) in data.reply_images"
                                :key="index"
                              >
                                <img :src="url2 + subData2" alt="" />
                              </div>
                            </li>
                            <!-- 用户追加评价 -->
                            <li
                              class="addEvaluate"
                              v-show="data.append_content !== ''"
                            >
                              <p>{{ $t("GoodsDetail.addition") }}</p>
                              <div>{{ data.append_content }}</div>
                            </li>
                            <!-- 用户追加评论图片 -->
                            <li>
                              <span
                                class="ET_img"
                                v-for="(subData4, x) in data.append_images"
                                :key="x"
                                @click="imgclick(subData4, index)"
                                ><img :src="url2 + subData4" alt=""
                              /></span>
                            </li>
                            <!-- 卖家追加评价的回复 -->
                            <li
                              class="reply"
                              v-show="
                                data.append_reply_content !== '' ||
                                (data.append_reply_images !== '' &&
                                  data.append_reply_images.length > 0)
                              "
                            >
                              <i class="triangle"></i>
                              <h5>
                                {{ $t("GoodsDetail.reply") }}：{{
                                  data.append_reply_content
                                }}
                              </h5>
                              <div
                                class="replyImage"
                                v-for="(
                                  subData3, index
                                ) in data.append_reply_images"
                                :key="index"
                              >
                                <img :src="url2 + subData3" alt="" />
                              </div>
                            </li>
                            <!-- 放大的图片 -->
                            <li v-show="data.imgBool">
                              <div class="enlargeImg">
                                <img :src="url2 + data.enlargeUrl" alt="" />
                              </div>
                            </li>
                            <li class="time">{{ data.createtime | time }}</li>
                          </ul>
                        </div>
                      </div>
                      <!-- 分页组件 -->
                      <paging
                        :obj="pageObj"
                        @page="child"
                        v-if="pagingBool"
                      ></paging>
                    </div>
                    <div class="noComment" v-else>
                      <div>暂时没有评价</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <LoginDialog
        :loginDialog="dialog"
        @close="dialogData"
        v-if="dialog"
      ></LoginDialog>
    </section>
  </div>
</template>

<script src="../../../public/js/script.js"></script>
<script src="../../../public/js/goods-detail-jq.js"></script>
<script>
// import table2excel from 'js-table2excel';
import LoginDialog from "@/components/LoginDialog.vue";
import paging from "@/components/Paging.vue";
export default {
  data() {
    return {
      qqUrl: "", // qq客服临时会话
      commentArr: [], // 评论原数组
      statusArr: [], // 评论状态数组
      renderingArr: [], // 评论渲染数组
      evaluateBool: true, // 是否请求评价接口数据，
      // headimgurl: "",   // 放大的图片
      // imgBool: null,   // 评价的图片，放大是否显示
      pagingBool: true, // 分页组件是否显示
      // 传给分页组件的数据
      pageObj: {
        id: "",
        currentPage: 1, //默认第一页
        pageSize: 10, //每页显示多少条数据
        totals: 0, //一共多少条数据
      },
      allNum: 0, // 全部评论标识数字
      praiseNum: 0, // 好评标识数字
      usualNum: 0, // 中评标识数字
      negativeNum: 0, // 差评标识数字

      percentage: 3, // 评价评分
      state: 1, //购买输入框数量
      shopNum: 0, //添加到购物车的数量
      listInfoNum: 0, //储存购物车的商品数量
      kuchun: 0, //库存数量
      liNum: 0, // 评价导航栏
      ulBool: true, //商品参数，节点是否显示
      addshop: false, //添加购物车按钮是否禁用
      brandBool: true, //店铺名称，是否显示
      dialog: false, //是否打开登陆对话框
      num: 1, // 1 产品概述，2 参数的样式切换，3 评价
      video: true, //视频和播放按钮的显示隐藏
      videoBool: false, //是否显示视频模块,默认不显示
      info: [], // 渲染的数组
      param: [], // 规格参数
      brand: [], // 店铺
      url: "https://mp.uekea.cn/attachment/", //图片网址拼接
      url2: "https://mp.uekea.cn/attachment/", // 上传图片显示拼接的路径
      // excel表格标题
      column: [
        {
          title: "图片",
          key: "pic",
          type: "image",
          width: 100,
          height: 70,
        },
        {
          title: "标题",
          key: "name",
          type: "text",
        },
        {
          title: "单价",
          key: "jiage",
          type: "text",
        },
        {
          title: "数量",
          key: "shuliang",
          type: "text",
        },
        {
          title: "小计",
          key: "subtotal",
          type: "text",
        },
      ],
      // excel表格数据
      datas: [
        {
          pic: "",
          name: "",
          jiage: "",
          shuliang: 1,
        },
      ],
      excelName: "广州优粤家", //excel表名
    };
  },
  components: {
    LoginDialog,
    paging,
  },
  methods: {
    // 客服
    Cservice() {
      this.$get(`brand/${this.brand[0].brand_id}`).then((res) => {
        if (res.code == 200) {
          if (
            res.data.brandInfo[0] !== undefined &&
            res.data.brandInfo[0].qq !== ""
          ) {
            window.open(
              "http://wpa.qq.com/msgrd?chat_type=wap&v=3&uin=" +
                res.data.brandInfo[0].qq +
                "&site=qq&menu=yes"
            );
            // window.location.href = "http://wpa.qq.com/msgrd?chat_type=wap&v=3&uin=" + res.data.brandInfo[0].qq + "&site=qq&menu=yes";
          }
        }
      });
    },
    // 子组件传值过来
    dialogData(datas) {
      var _this = this;
      _this.dialog = false;
      if (datas != undefined) {
        if (_this.$Cookie.getCookie("token") != undefined) {
          _this.nameBool = false;
          _this.userName = datas.userName;
        }
      }
    },
    // 分页组件传过来的数据
    child(i) {
      this.renderArray(i);
    },
    // 分页渲染数据
    renderArray(index) {
      let arr = [];
      let pageIndex = this.pageObj.pageSize * (index - 1); // 每一页开始下标
      let pageNum = this.pageObj.pageSize * index; // 每一页最后下标

      for (let k = pageIndex; k < pageNum; k++) {
        if (this.statusArr[k] != undefined) {
          arr.push(this.statusArr[k]);
        } else {
          break;
        }
      }
      if (arr.length > 0) {
        this.renderingArr = arr; // 赋值给渲染数组
      } else {
        this.renderingArr = []; // 赋值给渲染数组
        this.pagingBool = false; // 隐藏分页组件
      }
      // 判断状态数组的长度，是否大于每页显示的数量
      if (this.statusArr.length > this.pageObj.pageSize) {
        this.pagingBool = true; // 显示分页组件
      } else {
        this.pagingBool = false; // 隐藏分页组件
      }
    },
    // 商品详情，隐藏显示
    prodDetails() {
      this.num = 1;
    },
    // 商品参数，隐藏显示
    prodSpec() {
      this.num = 2;
    },
    // 商品评价
    evaluate() {
      var _this = this;
      _this.num = 3;
      if (_this.evaluateBool) {
        // 获取商品评价数据
        _this.$get(`order/comment/${_this.info[0].goods_id}`).then((res) => {
          if (res.code == 200) {
            for (let i = 0; i < res.data.length; i++) {
              res.data[i].imgBool = false; // 是否打开放大图片
              res.data[i].enlargeUrl = ""; // 放大图片的路径
            }
            _this.commentArr = res.data; // 原数组
            _this.evaluateBool = false; // 不再请求数据，当再次刷新或重新进入页面才重新请求
            // 测试数据，评论数据
            // _this.renderingArr = _this.commentArr;    // 默认全部评论，把原评论数组，赋值到渲染数组
            _this.statusArr = _this.commentArr; // 默认全部评论，把原评论数组，赋值到评论状态数组
            _this.pageObj.totals = _this.commentArr.length; // 一共多少条数据
            _this.renderArray(1);
            let num1 = 0;
            let num2 = 0;
            let num3 = 0;
            // 循环原数组，把好评、中评、差评的标识数字算出来
            for (let i = 0; i < _this.commentArr.length; i++) {
              // 好评，5颗星
              if (_this.commentArr[i].level == 5) {
                num1 += 1;
              } else if (
                _this.commentArr[i].level == 2 ||
                _this.commentArr[i].level == 3 ||
                _this.commentArr[i].level == 4
              ) {
                // 中评，2~4颗星
                num2 += 1;
              } else if (_this.commentArr[i].level == 1) {
                // 差评，1颗星
                num3 += 1;
              }
            }
            _this.allNum = _this.commentArr.length; // 全部评论标识数字
            _this.praiseNum = num1; // 好评标识数字
            _this.usualNum = num2; // 中评标识数字
            _this.negativeNum = num3; // 差评标识数字
          }
        });
      }
    },
    // 判断库存数量并赋值
    kuchunNum() {
      var _this = this;
      let storeKuchun = _this.$store.state.goodNum;
      if (storeKuchun.length > 0) {
        for (let i = 0; i < storeKuchun.length; i++) {
          if (_this.info[0].goods_id == storeKuchun[i].goods_id) {
            _this.listInfoNum = storeKuchun[i].num;
          }
        }
      }
      let Inventory = _this.info[0].stock - _this.listInfoNum;
      if (Inventory > 0) {
        _this.kuchun = Inventory;
        _this.addshop = false;
      } else {
        _this.kuchun = 0;
        _this.addshop = true;
      }
    },
    // 点击添加到购物车
    shoppingTrolley() {
      var _this = this;
      //判断是否登陆
      if (_this.$Cookie.getCookie("token") != undefined) {
        // 判断数量框是否禁用，如果是，就是没库存了
        if (!_this.addshop) {
          // 判断库存是否大于等于1，并且输入框是否大于等于1
          if (Number(_this.info[0].stock) >= 1 && Number(_this.state) >= 1) {
            _this.shopNum += _this.state;
            // 判断库存数量是否大于或者等于输入框数量。
            // if(_this.kuchun >= _this.state) {
            //   _this.$MessageAlert(true, '添加商品到数据库，成功，测试', 'success');
            //   // _this.$MessageAlert(true, _this.$t('GoodsDetail.successAdded'), "success");
            // } else {
            //   _this.$MessageAlert(true, _this.$t('GoodsDetail.addFailed'), "error");
            //   // 库存没货的时候，就给数量输入框赋值1
            //   _this.state = 1;
            // }

            // 判断库存小于输入框数量时
            if (_this.kuchun < _this.state) {
              // 库存没货的时候，就给数量输入框赋值1
              _this.state = 1;
              _this.$MessageAlert(
                true,
                _this.$t("GoodsDetail.addFailed"),
                "error"
              );
            }

            let Inventory =
              _this.info[0].stock - _this.listInfoNum - _this.shopNum;
            // 计算库存数量
            if (Inventory > 0) {
              _this.kuchun = Inventory;
              _this.addshop = false;

              let storeArr = _this.$store.state.goodNum;
              let detailArr = [];
              let storeObj = {
                goods_id: _this.info[0].goods_id,
                num: _this.listInfoNum + _this.shopNum,
              };
              if (storeArr.length > 0) {
                let sd = 0;
                for (let j = 0; j < storeArr.length; j++) {
                  if (storeArr[j].goods_id == _this.info[0].goods_id) {
                    storeArr[j].num = _this.listInfoNum + _this.shopNum;
                  } else {
                    sd += 1;
                  }
                  detailArr.push(storeArr[j]);
                }
                if (sd == storeArr.length) {
                  detailArr.push(storeObj);
                }
              } else {
                detailArr.push(storeObj);
              }
              // 储存到vuex里面
              _this.$store.commit("goods", detailArr);
            } else {
              _this.kuchun = 0;
              _this.addshop = true;
              // 储存到vuex里面
              if (Inventory == 0) {
                let storeArr = _this.$store.state.goodNum;
                let detailArr = [];
                for (let j = 0; j < storeArr.length; j++) {
                  if (storeArr[j].goods_id == _this.info[0].goods_id) {
                    storeArr[j].num = _this.listInfoNum + _this.shopNum;
                  }
                  detailArr.push(storeArr[j]);
                }
                _this.$store.commit("goods", detailArr);
              }
            }
            if (_this.state > _this.kuchun) {
              _this.state = _this.kuchun;
            }
            _this.monitorPage(); // 添加商品请求接口
          } else {
            if (Number(_this.info[0].stock) < 1) {
              _this.$MessageAlert(
                true,
                _this.$t("GoodsDetail.addFailed"),
                "error"
              );
              _this.state = 1;
            } else {
              _this.$MessageAlert(
                true,
                _this.$t("GoodsDetail.goodsNum"),
                "error"
              );
              _this.state = 1;
            }
            _this.addshop = true;
          }
        } else {
          _this.$MessageAlert(true, _this.$t("GoodsDetail.addFailed"), "error");
        }
      } else {
        _this.dialog = true; //显示登陆框
        // _this.$MessageAlert(true, _this.$t('share.Message.login'), "error")
      }
    },
    // 下载家具模板
    download() {
      var _this = this;
      if (_this.$Cookie.getCookie("token") != undefined) {
        window.location.href = _this.url + _this.info[0].model_image;
      } else {
        _this.dialog = true; //显示登陆框
        // this.$MessageAlert(true, this.$t('share.Message.login'), "error")
      }
    },
    // 跳转到店铺
    shop(id) {
      this.$router.push({ path: "./store", query: { Id: id } });
    },
    // 添加商品请求数据
    monitorPage() {
      var _this = this;
      let sdata = _this.$store.state.goodNum;
      let snum = 0;
      let k = 0;
      for (let i = 0; i < sdata.length; i++) {
        if (_this.info[0].goods_id == sdata[i].goods_id) {
          snum += sdata[i].num;
        } else {
          k += 1;
        }
      }
      if (k == sdata.length) {
        snum = _this.shopNum;
      }
      // 请求后台数据
      if (snum > 0) {
        _this
          .$post("cart/change", {
            user_id: _this.$Cookie.getCookie("userID"),
            goods_id: _this.info[0].goods_id,
            num: JSON.stringify(snum),
            is_select: "1",
          })
          .then((res) => {
            if (res.code == "200") {
              _this.$MessageAlert(
                true,
                _this.$t("GoodsDetail.successAdded"),
                "success"
              );
            } else if (res.code == "400") {
              _this.$MessageAlert(
                true,
                _this.$t("Register.warningMessage"),
                "error"
              );
            }
          });
      }
    },
    // 点击播放视频
    playVideo() {
      this.video = false;
    },
    // 关闭视频播放
    closeVideo() {
      this.video = true;
    },
    // 点击评价图片，显示放大图片
    imgclick(data, index) {
      this.renderingArr[index].enlargeUrl = data;
      this.renderingArr[index].imgBool = true;
      this.statusArr[index].enlargeUrl = data;
      this.statusArr[index].imgBool = true;
    },
    // 评价导航栏
    liBar(index) {
      var _this = this;
      _this.liNum = index;
      let arr = [];
      switch (index) {
        case 0:
          // _this.renderingArr = _this.commentArr;      // 把原数组，赋值给评论渲染的数组
          _this.statusArr = _this.commentArr; // 把原数组，赋值给评论渲染的数组
          _this.pageObj.totals = _this.commentArr.length;
          _this.pageObj.currentPage = 1; // 分页第一页
          _this.renderArray(1);
          break;
        case 2:
          // 好评，5星为好评
          for (let i = 0; i < _this.commentArr.length; i++) {
            if (_this.commentArr[i].level == 5) {
              arr.push(_this.commentArr[i]);
            }
          }
          // _this.renderingArr = arr;
          _this.statusArr = arr;
          _this.pageObj.totals = arr.length;
          _this.pageObj.currentPage = 1; // 分页第一页
          _this.renderArray(1);
          break;
        case 3:
          // 中评，2、3、4星为中评
          for (let i = 0; i < _this.commentArr.length; i++) {
            if (
              _this.commentArr[i].level == 2 ||
              _this.commentArr[i].level == 3 ||
              _this.commentArr[i].level == 4
            ) {
              arr.push(_this.commentArr[i]);
            }
          }
          _this.statusArr = arr;
          _this.pageObj.totals = arr.length;
          _this.pageObj.currentPage = 1; // 分页第一页
          _this.renderArray(1);
          break;
        case 4:
          // 差评，1星
          for (let i = 0; i < _this.commentArr.length; i++) {
            if (_this.commentArr[i].level == 1) {
              arr.push(_this.commentArr[i]);
            }
          }
          _this.statusArr = arr;
          _this.pageObj.totals = arr.length;
          _this.pageObj.currentPage = 1; // 分页第一页
          _this.renderArray(1);
          break;
        default:
          break;
      }
    },
  },
  filters: {
    // 评论时间
    time(date) {
      // 讲字符串转为Date格式
      let mt = new Date(date * 1000);
      //获取年份
      let year = mt.getFullYear();
      //从0开始，获取月份，padStart()字符串补全，用于头部补全，第一个参数字符串最小长度，第二个参数小于最小长度用来补全的字符串
      let month = (mt.getMonth() + 1).toString().padStart(2, "0");
      //获取天数
      let day = mt.getDate().toString().padStart(2, "0");
      //获取小时
      let hh = mt.getHours().toString().padStart(2, "0");
      //获取分钟
      let mm = mt.getMinutes().toString().padStart(2, "0");
      return year + "-" + month + "-" + day + " " + hh + ":" + mm;
    },
  },
  created() {
    var _this = this;
    let ids = _this.$route.query.id;
    if (ids != "") {
      // 获取商品详情信息
      _this.$get(`goods/info/${ids}`).then((res) => {
        if (res.code == 200) {
          if (res.data.info.length > 0) {
            // res.data.info[0].content = res.data.info[0].content.replace(/images\//g, 'https://uekea-1257881260.cos.ap-guangzhou.myqcloud.com/images/');
            res.data.info[0].content = res.data.info[0].content.replace(
              /images\//g,
              "https://mp.uekea.cn/attachment/images/"
            );
            _this.info = res.data.info;
            if (res.data.brand.length > 0) {
              _this.brand = res.data.brand;
            } else {
              _this.brandBool = false;
            }
            // 判断是否有视频数据
            if (res.data.info[0].goods_video != "") {
              _this.videoBool = true;
            } else {
              _this.videoBool = false;
            }
            _this.kuchunNum(); //调用库存赋值方法
          } else {
            _this.$router.push({ patch: "/" });
            _this.$MessageAlert(
              true,
              _this.$t("Register.failureMessage2"),
              "error"
            );
          }
          if (res.data.param.length > 0) {
            _this.param = res.data.param;
            _this.ulBool = true;
          } else {
            _this.ulBool = false;
          }
        } else if (res.code == 404) {
          _this.$MessageAlert(true, _this.$t("share.Message.error"), "error");
        }
      });
    }
  },
};
</script>

<style lang="less" scoped>
@import "../../../public/css/font-awesome.css";
@import "../../../public/css/goods_detail/goods_style.css";

.tabs-ul {
  margin-bottom: 0px;
  li:first-child {
    border-left: 1px solid #e2e2e2;
  }
  li:last-child {
    border-right: 1px solid #e2e2e2;
  }
}
.tabs-content {
  background-color: white;
}
.inner-column {
  text-align: left;
}
.item-quantity {
  display: flex;
}
.product-details .basic-details .quantity-spinner {
  padding: 8px 13px !important;
  font-size: 15px;
}
table {
  .table_tr {
    font-weight: 700;
    font-family: 微软雅黑;
    font-size: 15px;
    line-height: 28px;
    white-space: nowrap;
    td:nth-child(1) {
      vertical-align: top;
      // width: 15%;
    }
    td:nth-child(2) {
      padding-left: 30px;
    }
  }
}
.evaluateTitle {
  margin-top: 0px;
  font-size: 16px;
  border: 1px solid #e1e1e1;
  padding: 10px;
  text-transform: none;
  span {
    float: right;
    margin-right: 5%;
    i {
      color: red;
      font-style: normal;
    }
  }
}
.navigationBar {
  margin-bottom: 15px;
  ul {
    // border: 1px solid red;
    height: 36px;
    margin: 0px;
    line-height: 33px;
    li {
      color: #555;
      float: left;
      padding: 0px 15px;
      cursor: pointer;
    }
    li:hover {
      color: rgb(223, 65, 67);
    }
  }
}
.evaluateText {
  border-bottom: 1px solid #ccc;
  // margin-top: 5px;
  padding: 10px 0px 15px;
  // height: 100%;
  .ET_left {
    width: 170px;
    // height: 100%;
    padding: 15px 10px;
    vertical-align: top;
    // height: 100px;
    // border: 1px solid yellow;
    display: inline-block;
    .headPortrait {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 10px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .user_name {
      color: #666;
      font-size: 12px;
      display: inline-block;
      height: 30px;
      width: 100px;
      line-height: 30px;
      vertical-align: top;
      overflow: hidden;
      text-transform: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .ET_right {
    display: inline-block;
    width: calc(100% - 170px);
    // width: 800px;
    // border: 1px solid yellow;
    ul {
      li {
        margin: 10px 0px;
        font-style: 16px;
        color: #666;
        // line-height: 30px;
        .ET_img {
          display: inline-block;
          // width: 52px;
          height: 52px;
          margin-right: 10px;
          cursor: pointer;
          img {
            height: 100%;
            // width: auto;
          }
        }
        .enlargeImg {
          // width: 300px;
          height: 400px;
          // border: 1px solid #eee;
          overflow: hidden;
          img {
            height: 100%;
          }
        }
      }
      .reply {
        padding: 8px 5px;
        background-color: #ededed;
        position: relative;
        margin-top: 15px;
        .triangle {
          position: absolute;
          top: -15px;
          left: 10px;
          display: inline-block;
          height: 0px;
          width: 0px;
          border: 8px solid transparent;
          border-bottom-color: #ededed;
        }
        h5 {
          color: #666;
          margin: 0px;
          margin-bottom: 15px;
        }
        .replyImage {
          display: inline-block;
          text-align: center;
          margin-right: 15px;
          margin-bottom: 10px;
          width: 50px;
          height: 50px;
          img {
            height: 100%;
          }
        }
      }
      .addEvaluate {
        p {
          font-size: 15px;
          margin: 0px;
          margin-bottom: 5px;
          color: #e3393c;
        }
      }
      .time {
        color: #888;
      }
    }
  }
}
.cart-num {
  background-color: #e99c2e;
  border: 2px solid #e99c2e;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 10px;
}

.cart {
  width: 70px;
  height: 50px;
  margin-top: 50px;
}

.s-cate::-webkit-scrollbar {
  width: 5px;
}

.s-cate::-webkit-scrollbar-thumb {
  background-color: #e99c2e;
}

ul.dropdown-menu.cart-list {
  height: 232px;
  overflow-y: scroll;
  scrollbar-width: thin;
  border-radius: 3px;
  width: 200px;
  background: #fff;
  border: solid 1px #a09e9c;
  border-top: solid 5px;
}

ul.cart-list {
  padding: 0 !important;
  width: 250px !important;
}

ul.cart-list > li > a.photo {
  padding: 0 !important;
  margin-right: 15px;
  float: left;
  display: block;
  width: 50px;
  height: 50px;
  line-height: 65px;
  left: 15px;
  top: 15px;
}

ul.cart-list > li {
  border-bottom: solid 1px #ebebeb;
  padding: 15px 15px 0px 15px;
}

ul.cart-list > li img {
  width: 50px;
  height: 50px;
  border: transparent;
}

ul.cart-list > li.total {
  background-color: #fff;
  padding-bottom: 20px !important;
}

ul.cart-list > li.total span {
  color: #43465d;
  font-size: 16px;
  font-weight: 500;
}

ul.cart-list > li.total > span {
  padding-top: 0px;
  position: relative;
  top: 4px;
}

.cart-list-txt {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
}

.cart-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
}

.cart-close {
  right: 10px;
  margin-top: 3px;
  position: absolute;
}

.btn-cart {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e99c2e;
  border: 1px solid #e99c2e;
  width: 80px;
  height: 30px;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  border-radius: 3px;
}

.pull-right {
  float: right !important;
}

// 数量input框
/deep/ .el-input {
  width: 120px;
}
/deep/ .el-input-number {
  width: 120px;
  font-size: 15px;
}
/deep/ .el-input-number--medium .el-input__inner {
  padding-left: 36px;
  padding-right: 36px;
}
// 下载excel表格
/deep/ .btn_download {
  margin-left: 10px;
}
// 店铺名称
.dianpu_name {
  margin-bottom: 30px;
  p {
    margin: 0px;
    height: 35px;
    font-weight: 500;
    line-height: 35px;
    // text-indent: 2.7em;
    margin-bottom: 10px;
    span {
      cursor: pointer;
      display: inline-block;
      text-indent: 0em;
      min-width: 102px;
      text-align: left;
    }
  }
  .goin {
    display: inline-block;
    font-weight: 500;
    // text-indent: 3em;
    span {
      display: inline-block;
      border: 1px solid #ccc;
      text-indent: 0em;
      padding: 7px 15px;
      cursor: pointer;
      font-size: 14px;
      i {
        color: #e3393c;
        margin-right: 5px;
        font-size: 22px;
        vertical-align: middle;
      }
    }
    span:hover {
      background: #666;
    }
  }
  .service {
    display: inline-block;
    border: 1px solid #ccc;
    text-indent: 0em;
    padding: 7px 15px;
    cursor: pointer;
    font-size: 14px;
    border-left: none;
    i {
      color: #e3393c;
      margin-right: 5px;
      font-size: 22px;
      vertical-align: middle;
    }
  }
  .service:hover {
    background: #666;
  }
}
.image-column {
  position: relative;
  img {
    height: 290px;
    width: 100%;
    object-fit: fill;
    object-fit: contain;
    object-fit: scale-down;
  }
}
.image_video {
  position: absolute;
  bottom: 5%;
  left: 35%;
  height: 55px;
  width: 55px;
  border-radius: 50%;
  overflow: hidden;
  img {
    height: 100%;
  }
}
.image_video:hover {
  cursor: pointer;
}
.play_video {
  position: absolute;
  padding-right: 40px;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  video {
    vertical-align: middle;
  }
}
.el-icon-close {
  position: absolute;
  top: 15px;
  right: 55px;
  font-size: 28px;
  color: #ccc;
}
.NavigationLi {
  color: #e4393c !important;
}
.noComment {
  text-align: center;
  height: 100px;
  font-size: 16px;
}
.active_btn {
  background-color: #fff !important;
}
.active_btn::before {
  opacity: 1 !important;
}
</style>